Review: Add icons to project mockups 複習：給 Mockup 新增圖示

圖示的設計價值Why use icons in mockups

圖示是代表操作或工具的視覺符號，若使用得當，它們可以：

• 節省介面空間

• 吸引使用者注意力

• 引導使用者跳轉至其他頁面或內容

• 強化產品品牌形象

• 提升可訪問性，打破語言障礙

在Zia’s Pizza應用中，設計師將圖示加入導航欄，與無圖示版本相比，使用者體驗更流暢、介面更緊湊、整體更具吸引力和包容性。

確定圖示放置位置Determine where to include icons

選擇圖示位置時，設計師通常會結合使用者流程，找出圖示能輔助使用者操作的位置。你可以從以下幾個常見區域著手：

• 首頁選單圖示

• 聯絡方式圖示

• 設定圖示

• 導航選單項圖示

這些圖示能將文字資訊“濃縮”為易懂的視覺符號。例如，經典的房子圖示表示“Home”，即使使用者不懂英文，也能透過圖形理解其含義。

匯入與設計圖示Design or import effective icons

在Figma中，設計師可以：

• 匯入圖示：如使用免費的 Material Design 外掛

• 自定義圖示：也可以根據品牌風格手動繪製

無論選擇哪種方式，都需考慮以下三點：

1 圖示是否具備包容性與可訪問性？

確保圖示不侷限於某一文化或地區，適用於廣泛使用者群體。

2 是否新增了替代文字（alt-text）？

螢幕閱讀器無法讀取圖示本身，但能識別alt-text標籤，幫助視障使用者理解介面內容。

3 圖示是否與品牌形象一致？

圖示應與品牌的顏色、風格、理念保持統一。